<template>
  <div class="statistics-card card-item" :style="{color: props.color}">
    <span class="icon">
      <i :class="props.icon"></i>
    </span>

    <div class="item">
      <span class="title">
        {{ props.title }}
      </span>

      <div class="value">
        <span class="amount">
          {{ props.value }}
        </span>
        <span class="unit">
          {{ props.unit }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

const props = defineProps({
  icon: {
    required: true,
    type: String
  },
  title: {
    required: true,
    type: String
  },
  value: {
    required: true,
    type: [String, Number]
  },
  unit: {
    required: true,
    type: String
  },
  color: {
    required: true,
    type: String
  }
})
</script>

<style lang="scss">
.statistics-card {
  width: 100%;
  padding: 10px;
  display: grid;
  grid-template-columns: 30% 1fr;
  justify-items: center;
  align-items: center;

  .iconfont, .icon {
    font-size: 2.5rem;
  }

  .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1vh;

    .title {
      font-size: 1.5rem;
    }

    .value {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5vw;

      .amount {
        font-weight: bold;
        font-size: 1.5rem;
      }

      .unit {
        font-size: 1.5rem;
      }
    }
  }
}
</style>
